import { BottomNavigation } from "@/components/ui/bottom-navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Compass, MapPin, Navigation, Clock } from "lucide-react";

const nearbyLocations = [
  {
    id: 1,
    name: "故宫博物院",
    distance: "500m",
    photos: 25,
    lastVisit: "2024-01-15",
    category: "历史古迹",
    thumbnail:
      "https://images.pexels.com/photos/9373300/pexels-photo-9373300.jpeg",
    description: "明清两朝的皇家宫殿，世界文化遗产",
  },
  {
    id: 2,
    name: "景山公园",
    distance: "800m",
    photos: 18,
    lastVisit: "2024-01-10",
    category: "公园",
    thumbnail:
      "https://images.pexels.com/photos/4241550/pexels-photo-4241550.jpeg",
    description: "俯瞰紫禁城的最佳观景点",
  },
  {
    id: 3,
    name: "北海公园",
    distance: "1.2km",
    photos: 32,
    lastVisit: "2024-01-08",
    category: "公园",
    thumbnail:
      "https://images.pexels.com/photos/3222196/pexels-photo-3222196.jpeg",
    description: "历史悠久的皇家园林",
  },
  {
    id: 4,
    name: "王府井步行街",
    distance: "1.5km",
    photos: 14,
    lastVisit: "2024-01-05",
    category: "商业街",
    thumbnail:
      "https://images.pexels.com/photos/10967785/pexels-photo-10967785.jpeg",
    description: "北京最著名的商业步行街",
  },
];

const recentVisits = [
  {
    name: "三里屯",
    time: "2小时前",
    photos: 8,
  },
  {
    name: "朝阳公园",
    time: "昨天",
    photos: 15,
  },
  {
    name: "798艺术区",
    time: "3天前",
    photos: 22,
  },
];

export default function Nearby() {
  return (
    <div className="min-h-screen bg-background pb-20">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-background/80 backdrop-blur-lg border-b border-border">
        <div className="flex items-center justify-between p-4">
          <div>
            <h1 className="text-2xl font-bold text-foreground">附近</h1>
            <p className="text-sm text-muted-foreground">发现周边的拍摄回忆</p>
          </div>
          <Button variant="outline" size="sm">
            <Navigation className="h-4 w-4 mr-2" />
            导航
          </Button>
        </div>
      </header>

      {/* Current Location */}
      <div className="p-4 bg-sage-50 border-b border-border">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-sage-200 rounded-full">
            <MapPin className="h-5 w-5 text-sage-800" />
          </div>
          <div>
            <h3 className="font-medium text-foreground">当前位置</h3>
            <p className="text-sm text-muted-foreground">
              北京市东城区景山前街
            </p>
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="p-4 space-y-6">
        {/* Recent Visits */}
        <section>
          <h2 className="text-lg font-semibold text-foreground mb-4">
            最近访问
          </h2>
          <div className="space-y-2">
            {recentVisits.map((visit, index) => (
              <Card
                key={index}
                className="hover:shadow-sm transition-shadow cursor-pointer"
              >
                <CardContent className="p-3">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-purple-100 rounded-lg">
                        <Clock className="h-4 w-4 text-purple-800" />
                      </div>
                      <div>
                        <h4 className="font-medium text-foreground">
                          {visit.name}
                        </h4>
                        <p className="text-sm text-muted-foreground">
                          {visit.time}
                        </p>
                      </div>
                    </div>
                    <Badge variant="secondary">{visit.photos} 张</Badge>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        {/* Nearby Places */}
        <section>
          <h2 className="text-lg font-semibold text-foreground mb-4">
            附近的拍摄地点
          </h2>
          <div className="space-y-4">
            {nearbyLocations.map((location) => (
              <Card
                key={location.id}
                className="hover:shadow-md transition-shadow cursor-pointer"
              >
                <CardContent className="p-4">
                  <div className="flex gap-4">
                    <div className="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0">
                      <img
                        src={location.thumbnail}
                        alt={location.name}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between mb-2">
                        <div>
                          <h3 className="font-semibold text-foreground">
                            {location.name}
                          </h3>
                          <p className="text-sm text-muted-foreground line-clamp-2">
                            {location.description}
                          </p>
                        </div>
                        <div className="text-right flex-shrink-0 ml-2">
                          <div className="text-sm font-medium text-primary">
                            {location.distance}
                          </div>
                          <div className="text-xs text-muted-foreground">
                            {location.photos} 张照片
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline" className="text-xs">
                          {location.category}
                        </Badge>
                        <span className="text-xs text-muted-foreground">
                          上次访问: {location.lastVisit}
                        </span>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        {/* Discover More */}
        <Card className="border-dashed border-2 border-muted-foreground/20">
          <CardContent className="p-8 text-center">
            <Compass className="h-8 w-8 text-muted-foreground mx-auto mb-3" />
            <h3 className="font-medium text-foreground mb-2">探索更多地点</h3>
            <p className="text-sm text-muted-foreground mb-4">
              开启位置服务，发现更多您曾经去过的地方
            </p>
            <Button variant="outline">开启位置服务</Button>
          </CardContent>
        </Card>
      </div>

      <BottomNavigation />
    </div>
  );
}
